<template>
	<view class="content">
		<view class="header">
			<view>
				<image class="icon" src="@/static/logo.png"></image>
			</view>
			<view style="display: flex;justify-content: space-between;margin:-40rpx 20rpx 0 20rpx;color:white;">
				<view>
					<text class="test">&#xe607;</text>
					<text>农贸批发</text>
				</view>
				<view>
					<text class="test">&#xe607;</text>
					<text>产地货源</text>
				</view>
				<view>
					<text class="test">&#xe607;</text>
					<text>买家保障</text>
				</view>
			</view>
		</view>
		<my-swiper></my-swiper>
		<scroll-view>
			<view class="nav">
				<zc-grid :list="imgList" @goTo="go"></zc-grid>
			</view>
			<!-- <view class="radius_bg"></view> -->
			<view>
				<view class="zxgy">
					<view class="more">
						<view style="font-size: 14px;">
							<text class="test">&#xe607;</text>
							<text class="fl_text">最新供应</text>
						</view>
						<view style="font-size: 10px;">
							<text class="br">查看更多</text>
						</view>
					</view>
					<mk-goods-list :goods="goods" @clickItem="goodsItem"></mk-goods-list>
				</view>
				<view class="zxcj">
					<view class="more">
						<view style="font-size: 14px;">
							<text class="test">&#xe607;</text>
							<text class="fl_text">最新采购</text>
						</view>
						<view style="font-size: 10px;">
							<text class="br">查看更多</text>
						</view>
					</view>
					<mk-goods-list :goods="goods" @clickItem="goodsItem"></mk-goods-list>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import zcGrid from '@/components/zc-grid/zc-grid.vue'
	import swiper from '@/components/swiper/swiper.vue'
	export default {
		components: {
			'zc-grid': zcGrid,
			'my-swiper': swiper
		},
		data() {
			return {
				imgList: [{
						id: 1,
						url: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
						text: '租赁服务'
					},
					{
						id: 2,
						url: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
						text: '农工服务'
					}, {
						id: 3,
						url: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
						page: 'zb',
						text: '抖货视频'
					},
					{
						id: 4,
						url: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
						text: '供应大厅'
					}, {
						id: 5,
						url: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
						text: '采购大厅'
					},
					{
						id: 6,
						url: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
						text: '看行情'
					}, {
						url: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
						text: '采购榜'
					},
					{
						id: 7,
						url: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
						text: '惠农资讯'
					}, {
						id: 8,
						url: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
						text: '农技学堂'
					},
					{
						id: 9,
						url: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
						text: '农用物资'
					},
				],
				goods: [{
					img: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
					title: '商品标题商品标题商品标题商品标题',
					littleTitle: '商品小标题商品小标题商品小标题',
					amount: '10',
					amountRemark: '元/斤',
				}, {
					img: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
					title: '商品标题商品标题商品标题商品标题',
					littleTitle: '商品小标题商品小标题商品小标题',
					amount: '10',
					amountRemark: '元/斤',
				}, {
					img: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
					title: '商品标题商品标题商品标题商品标题',
					littleTitle: '商品小标题商品小标题商品小标题',
					amount: '10',
					amountRemark: '元/斤',
					// label: '<div style="color: #CCCCCC;: 10px;">发布时间：<b style="color: #CCCCCC;">2021年8月31日</b></div>'
				}, {
					img: 'https://cdn.pixabay.com/photo/2020/07/21/16/24/landscape-5426755_960_720.jpg',
					title: '商品标题商品标题商品标题商品标题',
					littleTitle: '商品小标题商品小标题商品小标题',
					amount: '10',
					amountRemark: '元/斤',
					// label: '<div style="color: #CCCCCC;font-size: 10px;">发布时间：<b style="color: #CCCCCC;">2021年8月31日</b></div>'
				}]
			};
		},
		onLoad() {},
		methods: {
			goodsItem(item, e) {
				console.log(item);
				console.log(e);
				uni.navigateTo({
					// url: '/pages/item-list/item-list?id=1'
					url: '/pages/videos/videos'
				});
			},
			go(item) {
				// console.log(JSON.stringify(item))
				uni.navigateTo({
					// url: '/pages/item-list/item-list?id=1'
					url: '/pages/list-page/list-page'
				});
			}
		}
	};
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont';
		/* Project id 2780452 */
		src: url('//at.alicdn.com/t/font_2780452_lwrknsxgrcl.woff2?t=1630918241596') format('woff2'),
			url('//at.alicdn.com/t/font_2780452_lwrknsxgrcl.woff?t=1630918241596') format('woff'),
			url('//at.alicdn.com/t/font_2780452_lwrknsxgrcl.ttf?t=1630918241596') format('truetype');
	}

	.test {
		font-family: iconfont;
		color: red;
	}

	.icon {
		height: 60rpx;
		width: 60rpx;
		margin: 60rpx 60rpx;
		background-color: #39bf3e;
	}

	.content {
		width: 100vw;
	}

	.header {
		position: sticky;
		width: 100vw;
		height: 200rpx;
		background-color: #39bf3e;
		top: 0rpx;
		z-index: 9999;
		margin-bottom: 10rpx;
	}

	.zxgy {
		/* background-color: rgba(153, 204, 153, .2); */
	}

	.zxcj {
		/* background-color: rgba(255, 204, 204, .2); */
	}

	.fl_text {
		font-weight: 900;
		color: #3F536E;
		margin-left: 10rpx;
	}

	.n_list {
		margin-top: 100rpx;
	}

	.br {
		font-size: 12px;
		border: 1px dotted #999999;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
	}

	.more {
		height: 60rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10rpx 20rpx;
		background-color: #FFFFFF;
	}
</style>
